<template>
<div class="detail" v-if="data">
	<div class="table">
		<div class="table-header">
			<h3>{{data.info.ordername}}</h3>
			<p>怡生暖通有限公司</p>
		</div>
		<div class="table-body">
			<div class="card info">
				<ul class="clearfix">
					<li><span>客户名称</span>{{data.info.kehuchenghu}}</li>
					<li><span>方案设计</span>{{data.info.shejishi}}</li>
					<li><span>方案面积</span>{{data.info.xitongmianji}} ㎡</li>
					<li><span>制单日期</span>{{data.info.fanganriqi}}</li>
					<li><span>客户地址</span>{{data.info.kehudizhi}}</li>
				</ul>
			</div>
			<div class="card" v-for="(ojb,index) in arr" :key="index">
				<div class="card-header" @click="show(index)" :class="{selected : tabId == index}">
					<i class="el-icon-notebook-2"></i>
					<span>{{ojb.name}}</span>
					<i class="el-icon-arrow-right"></i>
					</div>
				<div class="card-body" ref="data">
				<el-table
				:data="ojb.data"
				size="small"
				style="width: 100%"
				cell-class-name="cell"
				header-cell-class-name="cell" v-loading="loading">
					<el-table-column prop="id" label="#" width="60px" fixed="left" align="center"></el-table-column>
					<el-table-column prop="name" label="项目名称/品牌" width="150" fixed="left" align="center">

					</el-table-column>
					<el-table-column label="图片" width="80" fixed="left" align="center">
						<template slot-scope="scope">
							<img class="thumb" :src="`http://101.37.16.149/clientmanage/public/upload/${scope.row.pic}`" alt="" v-img-preview>
						</template>
					</el-table-column>
					<el-table-column prop="content" label="功能作用" width="280" align="center">
						<template slot-scope="scope">
							<span class="content">{{scope.row.content}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="unit" label="单位" width="70" align="center"></el-table-column>
					<el-table-column prop="" label="销售价格" width="150" align="center">
						<template slot-scope="scope">
							￥{{number_format(scope.row.sellprice,2,'.',',')}}
						</template>
					</el-table-column>
					<el-table-column prop="name" label="对比方案" align="center">
						<template v-if="scope.row.plan_num_1 !== 0">
							<el-table-column prop="plan_num_1" label="数量" width="70" align="center"></el-table-column>
							</template>
							<el-table-column prop="plan_price_1" label="方案1" width="150" align="center">
								<template slot-scope="scope">
									￥{{number_format(scope.row.plan_price_1,2,'.',',')}}
								</template>
							</el-table-column>
						</template>
						<template v-if="scope.row.plan_num_2 !== 0">
						<el-table-column prop="plan_num_2" label="数量" width="70" align="center"></el-table-column>
						<el-table-column prop="plan_price_2" label="方案2" width="150" align="center">
							<template slot-scope="scope">
								￥{{number_format(scope.row.plan_price_2,2,'.',',')}}
							</template>
						</el-table-column>
						</template>
						<template v-if="scope.row.plan_num_3 !== 0">
						<el-table-column prop="plan_num_3" label="数量" width="70" align="center"></el-table-column>
						<el-table-column prop="plan_price_3" label="方案3" width="150" align="center">
							<template slot-scope="scope">
								￥{{number_format(scope.row.plan_price_3,2,'.',',')}}
							</template>
						</el-table-column>
						</template>
						<template v-if="scope.row.plan_num_4 !== 0">
						<el-table-column prop="plan_num_4" label="数量" width="70" align="center"></el-table-column>
						<el-table-column prop="plan_price_4" label="方案4" width="150" align="center">
							<template slot-scope="scope">
								￥{{number_format(scope.row.plan_price_4,2,'.',',')}}
							</template>
						</el-table-column>
						</template>
						<template v-if="scope.row.plan_num_5 !== 0">
						<el-table-column prop="plan_num_5" label="数量" width="70" align="center"></el-table-column>
						<el-table-column prop="plan_price_5" label="方案5" width="150" align="center">
							<template slot-scope="scope">
								￥{{number_format(scope.row.plan_price_5,2,'.',',')}}
							</template>
						</el-table-column>
					</el-table-column>

				</el-table>
				</div>
			</div>
			<div class="card">
				<div class="card-header"> <i class="el-icon-notebook-2"></i>方案版本</div>
				<div class="card-body active">
					<el-table
					:data="total"
					size="small"
					border
					header-row-class-name="total"
					cell-class-name="cell"
					style="width: 100%">
					<el-table-column
						prop="createuserid"
						align="center"
						label="方案版本号" width="150">
					</el-table-column>
					<el-table-column
						align="center"
						prop="fangantotal1"
						label="方案1">
						<template slot-scope="scope">
							￥{{number_format(scope.row.fangantotal1,2,'.',',')}}
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						prop="fangantotal2"
						label="方案2">
						<template slot-scope="scope">
							￥{{number_format(scope.row.fangantotal2,2,'.',',')}}
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						prop="fangantotal3"
						label="方案3">
						<template slot-scope="scope">
							￥{{number_format(scope.row.fangantotal3,2,'.',',')}}
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						prop="fangantotal4"
						label="方案4">
						<template slot-scope="scope">
							￥{{number_format(scope.row.fangantotal4,2,'.',',')}}
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						prop="fangantotal5"
						label="方案5">
						<template slot-scope="scope">
							￥{{number_format(scope.row.fangantotal5,2,'.',',')}}
						</template>
					</el-table-column>
					</el-table>
				</div>
			</div>
		</div>
		<div class="table-footer">
			<el-button-group class="btn">
				<el-button @click="close('/')" plain><i class="icon el-icon-close"></i> 关闭窗口</el-button>
				<el-button v-if="data.info.righttype == 2" plain disabled><i class="icon el-icon-view"></i> 可读订单</el-button>
				<el-button v-if="data.info.righttype == 3"
					@click="path('/order/edit/',$route.params.id)" plain><i class="icon el-icon-edit"></i> 可编辑订单</el-button>
				<el-dropdown @command="print">
					<el-button plain><i class="icon el-icon-printer"></i> 打印方案</el-button>
					<el-dropdown-menu slot="dropdown" class="print_dropdown">
						<el-dropdown-item command="1">打印方案1</el-dropdown-item>
						<el-dropdown-item command="2">打印方案2</el-dropdown-item>
						<el-dropdown-item command="3">打印方案3</el-dropdown-item>
						<el-dropdown-item command="4">打印方案4</el-dropdown-item>
						<el-dropdown-item command="5">打印方案5</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</el-button-group>
		</div>
	</div>
	<el-backtop :bottom="100">
    <div style="{
			height: 100%;
			width: 100%;
			text-align: center;}">
		<i class="icon el-icon-top"></i>
    </div>
  </el-backtop>
</div>
</template>

<script>
export default {
	name: 'Home',
	data(){
		return{
			tabId : 0,
			selected: true,
			loading: true,
			userinfo: '',
			token: '',
			data: '',
			arr : [],
			total:[]
		}
	},
	components: {
		
	},
	watch:{
	},
	mounted(){
		let data   = this.$storage.localGet('userinfo');
		let id     = this.$route.params.id;
		if(data.logincode !== undefined){
			this.userinfo  = data;
			this.getorderdetail(id);
		}else{
			this.$router.push('/login');
		}
	},
	methods:{
		share(id){
			console.log(id)
		},
		path(url,id){
			this.$router.push(url+id);
        },
		show(id){
			let _el = this.$refs.data[id];
			this.tabId = id;
			if (_el.getAttribute('class') === 'card-body active') {
				_el.setAttribute('class', 'card-body')
			} else {
				_el.setAttribute('class', 'card-body active');
			}
		},
		number_format(number, decimals, dec_point, thousands_sep) {
			/*
			* 参数说明：
			* number：要格式化的数字
			* decimals：保留几位小数
			* dec_point：小数点符号
			* thousands_sep：千分位符号
			* */
			number = (number + '').replace(/[^0-9+-Ee.]/g, '');
			var n = !isFinite(+number) ? 0 : +number,
				prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
				sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
				dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
				s = '',
				toFixedFix = function (n, prec) {
					var k = Math.pow(10, prec);
					return '' + Math.ceil(n * k) / k;
				};
		
			s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
			var re = /(-?\d+)(\d{3})/;
			while (re.test(s[0])) {
				s[0] = s[0].replace(re, "$1" + sep + "$2");
			}
		
			if ((s[1] || '').length < prec) {
				s[1] = s[1] || '';
				s[1] += new Array(prec - s[1].length + 1).join('0');
			}
			return s.join(dec);
		},
		getorderdetail(id){
			let vm  = this;
			let arr = [];
			let arr2= [];
			vm.total= [];
			vm.$api.init.getorderdetail(vm.userinfo.logincode,id).then(res=> {
				let data = res.data;
				if(data.code == 0){
					vm.data = data;
					vm.total.push(data.info);
					data  = data.moduleProductList;
					for(let i = 0;i < data.length; i++){
						if(data[i].type == 1){
							arr.push({name:data[i].typename,mid: data[i].mod_id,data: []});
						}
						if(data[i].type == 2){
							arr2.push(data[i]);
						}
					}
					setTimeout(() => {
						for(let b = 0;b < arr2.length; b++){
							console.log(arr2[b])
							for(let c = 0; c < arr.length; c++){
								if(arr2[b].mod_id == arr[c].mid && arr2[b].type == 2){
									arr[c].data.push(arr2[b]);
								}
							}
						}
					}, 1000);

					vm.arr = arr;
					vm.loading = false;
				}else{
					vm.$alert(data.msg, '错误', {
						type: 'error',
						confirmButtonText: '确定',
						callback: action => {
							vm.$router.push('/')
						}
					});
				}
			})
		},
		time(date) {
			let dates = new Date(date);
			var y = dates.getFullYear();
			var m = dates.getMonth() + 1;
			m = m < 10 ? ('0' + m) : m;
			var d = dates.getDate();
			d = d < 10 ? ('0' + d) : d;
			var h = dates.getHours();
			h=h < 10 ? ('0' + h) : h;
			var minute = dates.getMinutes();
			minute = minute < 10 ? ('0' + minute) : minute;
			var second=dates.getSeconds();
			second=second < 10 ? ('0' + second) : second;
			return y + '-' + m + '-' + d;
			//下面注释好像有点问题,时间中0会舍去
		},
		close(url){
			this.$store.commit('tabTips',3);
			this.$router.push(url);
		},
		print(command){
			let vm  = this;
			let id  = '';
			this.$router.push({
				path: `/print/${this.$route.params.id}/${command}`
			})

		}
	}
}
</script>
<style lang="less" scoped>
.detail{
	width: 100%;
	height: 100%;
	position: absolute;
	.table{
		margin: 0 auto;
		width: 1200px;
		padding: 5px 50px;
	}
	.table-header{
		padding: 25px 0 10px;
		text-align: center;
		position: relative;
		border-radius: 5px 5px 0 0;
		background-color: #fff;
		h3{
			color: #333;
			font-weight: 500;
			font-size: 28px;
			position: relative;
			i{
				font-size: 12px;
				margin-left: 5px;
				position: absolute;
				top: 15px;
			}
		}
		p{
			color: #555;
		}
	}
	.table-footer{
		padding: 5px 0;
		border-radius: 6px;
		background-color: #fff;
        box-shadow: 0 1px 0 0 rgba(0, 0, 0,.5);
	}
	.close{
		right: 0;
		top: 0;
		color: #777;
		font-size: 26px;
		cursor: pointer;
		z-index: 9;
		position: absolute;
	}
	.info{
		border-radius: 0 0 6px 6px!important;
		ul{
			padding: 15px 0 15px;
			list-style: none;
			li{
				width: 50%;
				float: left;
				line-height: 40px;
				font-size: 14px;
				margin: -1px 0 0 -1px;
				border: 1px solid #333;
				span{
					width: 80px;
					margin-right: 10px;
					color: #333;
					display: inline-block;
					text-align: center;
					border-right: 1px solid #333;
					background-color: #c7d3e6;
				}
				&:last-child{
					width: calc(100% - 1px);
				}
			}
		}
	}
	/deep/.cell{
		// text-align: center;
		.cell{
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		/deep/img{
			display: block;
			width: 100%;
		}
	}
	.card{
		padding: 0 15px 0;
		background-color: #fff;
		margin-bottom: 8px;
		border-radius: 6px;
		transition: .3s;
		overflow: hidden;
        box-shadow: 0 1px 0 0 rgba(0, 0, 0,.5);
		&:hover{
            box-shadow: 0 30px 80px -20px rgba(0, 0, 10, 0.1), 0 30px 70px -30px rgba(0, 0, 0, 0.7);
		}
		.card-header{
			height: 50px;
			font-size: 16px;
			line-height: 50px;
			font-weight: 700;
			cursor: pointer;
			user-select: none;
			display: flex;
			color: #FA6400;
			align-items: center;
			i{
				margin-right: 6px;
			}
			.el-icon-arrow-right{
				margin-left: auto;
				flex-shrink: 0;
				transition: .3s;
				transform:rotate(0deg);
			}
			&.selected{
				.el-icon-arrow-right{
					transform:rotate(90deg);
				}
			}
		}
		.card-body{
			display: none;
			height: 0;
			opacity: 0;
			background-color: #fff;
			margin-bottom: 15px;
			transition: 0.3s;
			&.active{
				opacity: 1;
				height: auto;
				display: block;
			}
			/deep/.total{
				th{
					background: #c7d3e6;
				}
			}
		}
	}
	.btn{
		width: 500px;
		display: block;
		text-align: center;
		margin: 30px auto;
		display: flex;
		.el-dropdown,
		.el-button{
			flex: 1;
			width: 100%;
			margin: 0 2px;
			border-radius: 5px;
			border-color: #409EFF;
    		color: #409EFF;
		}
		.el-button{
			padding: 12px 0;
		}
	}
	/deep/.el-table{
		thead th{
			color: #333;
			border-color: #333;
			background-color: #c7d3e6;
			font-size: 14px;
		}

		tbody td{
			color: #333;
			border-color: #333;
			font-size: 14px;
		}
		.content{
			display: block;
			text-align: justify;
		}
	}
	/deep/.el-table__fixed{
		&::before{
			background: #333;
		}
	}
	/deep/.el-table--border{
		border-color: #333;
		&::after,
		&::before{
			background-color: #333;
		}
	}
}
</style>